<template>
  <div class="demo-progress">
    <span><el-progress type="dashboard" :percentage="progress" :stroke-width="40" :color="colors" :width="500"/></span>
    <span class="text">{{ result }}</span>
  </div>
  <div class="start"><el-button type="success" @click="startLoading" size="large" style="width: 160px; height: 80px; font-size: 30px"><b>开始测试</b></el-button></div>
</template>
<script setup>

</script>
<script>
import {ref} from "vue";
let result=ref('');
const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#6f7ad3', percentage: 60 },
  { color: '#6ffa19', percentage: 80 },
  { color: '#5cb87a', percentage: 100 }
]
export default {
  setup() {
    const progress = ref(0);
    const startLoading = () => {
      // 初始化
      progress.value=0;
      result.value=''
      let count = 0;
      const timerId = setInterval(() => {
        count=count+Math.floor(Math.random()*6)
        if (count >= 100) {
          clearInterval(timerId);
          count=100;
          result.value='功能正常'
        }
        progress.value = count;
      }, 200);
    };
    const status = () => {
      for (let i = 0, len = colors.length; i < len; i++) {
        if (progress.value <= colors[i].percentage) {
          return colors[i].color
        }
      }
    };
    return {
      progress,
      startLoading,
      status,
      result
    };
  }
}
</script>

<style scoped>
.demo-progress{
  margin-bottom: 15px;
  margin-left: 60px;
}
.start{
  position: absolute;
  left: 458px;
  margin-top: -40px;
}
.text{
  position: absolute;
  left: 1000px;
  top:260px;
  font-size: 80px;


}
</style>